<template>
  <div class="bg-f2">
    <div class="bg-f2 bg-fff">
      <ul class="addMargin">
        <li>
          <el-button class="addRole btnSizeStyle" :disabled="quanxianBtns.btn1" icon="el-icon-plus" @click="addRole('添加卡口/电子警察字典')">添加</el-button>
        </li>
        <li>
          <div class="select">
            <span style="margin-right: 5px">字典类别:</span>
            <el-select v-model="unitList" clearable placeholder="选择类型">
              <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </li>
        <li>
          <el-input v-model.trim="unitList2" clearable prefix-icon="el-icon-search" placeholder="输入名称"></el-input>
        </li>
        <li>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">查询</el-button>
        </li>
      </ul>
      <el-drawer :visible.sync="increased" :with-header="false" :wrapperClosable="false">
        <div class="addUer_title">
          <span>{{ title }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer('ruleForm')"></i>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="字典名称：" prop="lxmc">
                <el-input v-model.trim="ruleForm.lxmc" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="字典类别：" prop="lxbs">
                <el-select v-model.trim="ruleForm.lxbs" clearable filterable placeholder="请输入" class="inputSelect">
                  <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <el-button class="users_btn btnSizeStyle" @click="offDrawer('ruleForm')">取 消</el-button>
            <el-button type="primary" class="users_btn btnSizeStyle" @click="submitForm(title, 'ruleForm')" v-preventReClick>确 定</el-button>
          </div>
        </el-form>
      </el-drawer>
      <el-card>
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="roleList"
          stripe
          border
          highlight-current-row
          style="width: 100%"
          @select="isCheck"
          @select-all="isCheckAll"
          @row-dblclick="rowClick"
          v-loading="tableLoad"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="selection" :selectable="checkboxT"></el-table-column>
          <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
          <el-table-column prop="lxmc" label="名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="yhsl" label="字典类别">
            <template slot-scope="scope">
              <el-tag :type="scope.row.lxbs === 1 ? '' : 'success'">{{ scope.row.lxbs === 1 ? '卡口类型' : '触发类型' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
          <el-table-column prop="tjsj" label="添加时间">
            <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button type="text" :disabled="quanxianBtns.btn2" @click="addRole('编辑卡口/电子警察字典', scope.row)">编辑</el-button>
              <span class="operation" v-show="scope.row.scbs - '' === 0 ? true : false"></span>
              <el-button type="text" class="color_f56f6f" :disabled="quanxianBtns.btn3" v-show="scope.row.scbs - '' === 0 ? true : false" @click="deteleRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
          <span>您确定要删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteItem2" v-preventReClick>确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="删除" :visible.sync="dialogVisible2" width="30%">
          <span>您确定要删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiaosc">取 消</el-button>
            <el-button type="primary" @click="deteleCheck" v-preventReClick>确 定</el-button>
          </span>
        </el-dialog>
        <div class="pageFloat">
          <el-button size="small" type="danger" class="shoujiBtn btnSizeStyle" :disabled="this.deleteAll.length > 0 ? false : true" @click="dialogVisible2 = true">批量删除</el-button>
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { ziC } from '../../utils/allUrl.js'
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '../../utils/loading.js'
export default {
  data: function () {
    return {
      currentPage: 1,
      pageSize: 10,
      roleList: [],
      total: 0,
      jgmcOptions: [
        {
          value: 1,
          label: '卡口类型',
        },
        {
          value: 2,
          label: '触发类型',
        },
      ], // 字典类别数据源
      dialogVisible: false,
      dialogVisible2: false,
      unitList: '', // 字典类别
      unitList2: '', // 字典名称
      ruleForm: {
        lxmc: '',
        lxbs: '',
      },
      rules: {
        lxmc: [
          { required: true, message: '此处为必填项', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ],
        lxbs: [{ required: true, message: '此处为必填项', trigger: 'change' }],
      },
      deleteID: '', // 删除的id
      increased: false, // 添加分组对话框
      title: '添加资产分组',
      deleteAll: [], // 批量删除
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
      },
    }
  },
  created: function () {
    this.getList()
    this.jurisdictionBtn()
  },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_KKDJGL_KKDJZD') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'kkdjzd:insertKaKouDianJingZiDian') {
              this.quanxianBtns.btn1 = false // 添加
            } else if (item2.qxdm === 'kkdjzd:updateKaKouDianJingZiDian') {
              this.quanxianBtns.btn2 = false // 修改
            } else if (item2.qxdm === 'kkdjzd:deleteKaKouDianJingZiDians') {
              this.quanxianBtns.btn3 = false // 删除
            }
          })
        }
      })
    },
    // 获取数据
    async getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      this.deleteAll = []
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/selectKaKouDianJingZiDian`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleClick(tab, event) {},
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.searchBtn()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.searchBtn()
    },
    // 添加/修改
    addRole(title, scope) {
      if (scope) {
        this.ruleForm = scope
      } else {
        this.ruleForm = {
          lxmc: '',
          lxbs: '',
        }
      }
      this.title = title
      this.increased = true
    },
    // 删除
    deteleRole(scope) {
      this.deleteID = scope.id
      this.dialogVisible = true
    },
    async deleteItem2() {
      const params = new URLSearchParams()
      params.append('ids', this.deleteID)
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/deleteKaKouDianJingZiDians`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: '删除失败',
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: '删除成功',
        center: true,
      })
      this.dialogVisible = false
      this.getList()
    },
    // 取消按钮
    offDrawer(ruleForm) {
      this.$refs.ruleForm.resetFields()
      this.increased = false
      this.getList()
    },
    // 提交按钮
    submitForm(title, ruleForm) {
      const { lxmc, lxbs, id } = this.ruleForm
      const params = new URLSearchParams()
      params.append('LXMC', lxmc)
      params.append('LXBS', lxbs)
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (title === '添加卡口/电子警察字典') {
            const { data: res } = await this.$http.post(`${ziC}kkdjzd/insertKaKouDianJingZiDian`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased = false
            this.getList()
            this.ruleForm = {
              lxmc: '',
              lxbs: '',
            }
          } else {
            params.append('ID', id)
            const { data: res } = await this.$http.post(`${ziC}kkdjzd/updateKaKouDianJingZiDian`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased = false
            this.getList()
          }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    isCheck(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    // 全选
    isCheckAll(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    // 批量删除
    async deteleCheck() {
      const params = new URLSearchParams()
      params.append('ids', this.deleteAll)
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/deleteKaKouDianJingZiDians`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisible2 = false
      this.getList()
    },
    // 取消删除
    quxiaosc: function () {
      this.$refs.multipleTable.clearSelection()
      this.dialogVisible2 = false
      this.deleteAll = []
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 查询
    async searchBtn(sign) {
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('LXBS', this.unitList)
      params.append('LXMC', this.unitList2)
      this.setList(params)
    },
    rowClick(row, column, event) {
      if (row.scbs !== 1) {
        const a = this.deleteAll.findIndex((item) => item === row.id)
        if (a !== -1) {
          this.deleteAll.splice(a, 1)
          this.$refs.multipleTable.toggleRowSelection(row, false)
        } else {
          this.deleteAll.push(row.id)
          const s1 = new Set(this.deleteAll)
          this.deleteAll = [...s1]
          this.$refs.multipleTable.toggleRowSelection(row, true)
        }
      } else {
        return false
      }
    },
    checkboxT(row, index) {
      // 0 未发现 1已发现 2已登记
      if (row.scbs === 0) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.addMargin {
  margin-bottom: 15px;
  height: 35px;
  line-height: 35px;
  display: flex;
  > li:first-child {
    margin-left: 0;
  }
  > li {
    margin-left: 10px;
    .addRole {
      background: rgba(103, 194, 58, 1);
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }
}
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.usersNumber {
  color: rgba(46, 146, 247, 1);
}
.el-card {
  border-radius: 0;
}
.el-drawer {
  .addUer_title {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
    > span {
      font-size: 18px;
      font-weight: 600;
    }
    .addUer_icon {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      flex-flow: column;
      justify-content: center;
      cursor: pointer;
    }
  }
  .el-row {
    margin-top: 30px;
  }
  .forms_fooer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    height: 61px;
    line-height: 61px;
    border-top: 1px solid #ededed;
  }
  .inputSelect {
    width: 260px;
  }
}
.pageFloat {
  width: 100%;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .shoujiBtn {
    margin-left: 15px;
  }
}
</style>
